<template>
  <div class="detail">
    <!-- <div class="bg"></div> -->
    <div class="new-header">
      <div class="left">
        <span>客户</span>
        <span>案例</span>
        <span>CASE</span>
      </div>
      <div class="right">
        <span>当前位置:</span>
        &nbsp; &nbsp;
        <span @click="toOtherPage('/Case')">客户案例</span>
        &nbsp; &nbsp;
        <span>></span>
        &nbsp; &nbsp;
        <span>案例详情</span>
      </div>
    </div>
    <div class="detail-box">
      <div class="head">
        <div class="title">{{ detail.name }}</div>
        <!-- <div class="time">{{ formatter(detail.createTime) }}</div> -->
      </div>
      <div class="content quill-editor">
        <div class="ql-editor" v-html="detail.content"></div>
      </div>
      <div id="btns" class="btns" :class="tobottom?'fixed':''">
        <div
          class="btn pre"
          :class="previous?'':'noData'"
          :title="previous?'上一条':'没有了'"
          @click="showPre"
        >
          <p>></p>
        </div>
        <div class="btn next" :class="next?'':'noData'" :title="next?'下一条':'没有了'" @click="showNext">
          <p>></p>
        </div>
        <div class="btn" @click="backTop">TOP</div>
        <div id="stop1"></div>
      </div>
    </div>
    <div id="stop"></div>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  nameL: "detail",
  data() {
    return {
      detail: {
        title: "",
        time: 0,
        content: ""
      },
      did: "",
      tobottom: false,
      previous: "",
      next: ""
    };
  },
  methods: {
    toOtherPage(path) {
      this.$router.push(path);
    },
    formatter(dates) {
      if (dates == "0") {
        return "-";
      } else {
        var date = new Date(dates);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let minute = date.getMinutes();
        if (minute < 10) {
          minute = "0" + minute;
        }
        let second = date.getSeconds();
        if (second < 10) {
          second = "0" + second;
        }
        return (
          y + "-" + m + "-" + d + "\xa0 " + hour + ":" + minute + ":" + second
        );
      }
    },
    getDetail() {
      this.$post("/v1/customer/demo/info", { did: this.did }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.detail = data.demo;
          this.previous = data.previous;
          this.next = data.next;
        }
      });
    },
    showNext() {
      if (!this.next) return;
      this.$router.replace({
        path: "/CaseDetail",
        query: {
          did: this.next.did
        }
      });
      this.did = this.next.did;
      this.getDetail();
    },
    showPre() {
      if (!this.previous) {
        return;
      }
      this.$router.replace({
        path: "/CaseDetail",
        query: {
          did: this.previous.did
        }
      });
      this.did = this.previous.did;
      this.getDetail();
    },
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
    handleScroll(h1, that) {
      return function() {
        let btns = document.getElementById("btns");
        let stop = document.getElementById("stop");
        let h = stop ? stop.getBoundingClientRect().top : "";
        if (h1 >= h) {
          that.tobottom = true;
        } else {
          that.tobottom = false;
        }
      };
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  mounted() {
    this.$parent.setNav(0, 0);
    this.did = this.$route.query.did;
    this.getDetail();
    let stop1 = document.getElementById("stop1");
    let h1 = stop1 ? stop1.getBoundingClientRect().top : "";
    let that = this;
    window.addEventListener("scroll", this.handleScroll(h1, that));
  }
};
</script>
<style lang="less" scoped>
.detail {
  background: #eff7fe;
  height: 100%;
  .new-header {
    width: 15.18rem;
    margin: 0 auto;
    padding: 0.6rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      font-size: 0.36rem;
      span {
        font-weight: 600;
        &:first-child {
          color: #1d73e6;
        }
        &:nth-child(2) {
          color: #000;
        }
        &:last-child {
          color: #a8a8a9;
        }
      }
    }
    .right {
      font-size: 0.18rem;
      span {
        &:nth-child(2),
        &:nth-child(4) {
          cursor: pointer;
        }
      }
    }
  }
  .detail-box {
    width: 15.18rem;
    margin: 0 auto 0.2rem;
    padding: 0.2rem;
    background: #fff;

    box-shadow: 1px 1px 5px 0 rgba(29, 39, 165, 0.33);
    min-height: 9rem;
    .head {
      padding: 0.2rem 0.3rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      margin-bottom: 0.7rem;
      text-align: center;

      .title {
        font-size: 0.3rem;
        line-height: 0.4rem;
      }
      .time {
        font-size: 0.14rem;
        text-align: right;
        margin-top: 0.1rem;
      }
    }
  }
  .content {
    font-size: 16px;
    padding: 0 0.8rem 0.8rem;
    /deep/img {
      max-width: 100%;
      height: auto;
    }
  }
}
.btns {
  font-size: 14px;
  position: fixed;
  top: 30%;
  right: 0.5rem;
  background: #fff;
  box-shadow: 1px 1px 1px 3px rgba(239, 247, 254, 0.7);
  .btn {
    border: 1px solid #e4ecf9;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
    &:hover {
      color: #fff;
      background: #1d73e6;
    }
  }
  .pre {
    p {
      transform: rotate(-90deg);
    }
  }
  .next {
    p {
      transform: rotate(90deg);
    }
  }
  .noData {
    background: #f0f0f0;
    color: #fff;
    cursor: not-allowed;
    &:hover {
      background: #f0f0f0;
      color: #fff;
    }
  }
}
.fixed {
  position: absolute;
  bottom: 0;
  top: auto;
}
@media screen and (max-width: 1000px) {
  .detail {
    .new-header {
      width: 100%;
      padding: 0.6rem 0.2rem;
      box-sizing: border-box;
      .right {
        font-size: 0.24rem;
      }
    }
    .detail-box {
      min-height: 5rem;
      margin: 0 0 0.2rem;
      box-sizing: border-box;
      .head {
        width: 100%;
        padding: 0.2rem;
        box-sizing: border-box;
      }
      width: 100%;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    .content {
      font-size: 16px;
      /deep/ img {
        max-width: 100%;
        height: auto;
      }
    }
    .btns {
      right: 0.2rem;
    }
  }
}
</style>